<template>
  <el-dialog v-model="visible" title="选择优惠券" width="50%">
    <div class="voucherSearch">
      <el-input placeholder="请输入券名" clearable class="searchInputBox">
      </el-input>
    </div>
    <el-table
      ref="multipleTableRef"
      highlight-current-row
      :data="couponsList"
      :row-key="
        (row:any) => {
          return row.id;
        }
      "
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
        :reserve-selection="true"
      />
      <el-table-column label="券名" prop="name" align="center" width="150">
      </el-table-column>
      <el-table-column label="券类型" prop="type" align="center" width="150">
        <template #default="{ row }">
          <span v-if="row.type === 1">折扣卷</span>
          <span v-if="row.type === 2">满减卷</span>
        </template>
      </el-table-column>
      <el-table-column
        label="优惠信息"
        prop="discountInformation"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column label="使用范围" prop="scope" align="center" width="151">
        <template #default="{ row }">
          <span v-if="row.scope === 1">全店商品</span>
          <span v-if="row.scope === 0">部分商品</span>
        </template>
      </el-table-column>
      <el-table-column
        label="限领次数"
        prop="numberLimit"
        align="center"
        width="150"
      >
        <template #default="{ row }">
          <span>{{ row.numberLimit }}张</span>
        </template>
      </el-table-column>
      <el-table-column
        label="指定人群"
        prop="designatedCrowd"
        align="center"
        width="150"
      >
        <template #default="{ row }">
          <span v-if="row.designatedCrowd === 0">不限人群</span>
          <span v-if="row.designatedCrowd === 1">会员用户</span>
          <span v-if="row.designatedCrowd === 2"> 普通用户</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="couponQueryParams.pageNum"
      v-model:limit="couponQueryParams.pageSize"
      @pagination="handleQuery"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmission">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
defineOptions({
  name: "CouponDialog",
  inheritAttrs: false,
});

defineExpose({
  open,
});

import { ref, reactive } from "vue";
import {
  CouponTypeQuery,
  CouponListVO,
  CouponIdsArr,
} from "@/api/marketing/types";
import { getCouponList } from "@/api/marketing/index";

const emit = defineEmits(["confirm"]);

const multipleTableRef = ref();

const total = ref(0);
const couponQueryParams = reactive<CouponTypeQuery>({
  pageNum: 1,
  pageSize: 1,
});

const couponsList = ref<CouponListVO[]>();

const visible = ref<boolean>(false);
const membershipLevel = ref<number>(1);
const ids = ref<number[]>([]);
//选择优惠券
function open(level: number, couponIds: number[]) {
  console.log(couponIds);
  membershipLevel.value = level;
  ids.value = couponIds;
  handleQuery();
}

function handleQuery() {
  getCouponList(couponQueryParams).then(({ data }) => {
    total.value = data.total;
    couponsList.value = data.list;
    visible.value = true;
    //每次翻页后都要重新执行 选中函数, 必须放在  visible.value = true; 后， 否则第一次加载就会报 multipleTableRef.value 是 undefined ！
    nextTick(() => {
      toggleSelection();
    });
  });
}

/** 行选中事件 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

function handleSubmission() {
  emit("confirm", membershipLevel.value, [...ids.value]);
  //清楚选中项目
  multipleTableRef.value!.clearSelection();
  visible.value = false;
}

function toggleSelection() {
  if (ids.value) {
    ids.value.forEach((id: number) => {
      couponsList.value?.forEach((row) => {
        if (id == row.id) {
          multipleTableRef.value!.toggleRowSelection(row, true);
        }
      });
    });
  }
}
</script>

<style lang="scss" scoped>
.searchInputBox {
  width: 150px;
}

.voucherSearch {
  margin: 0 0 20px;
}
</style>
